<template lang="jade">
  div.view-wrapper
    el-card
      el-row
        el-col(:span="19")
          span.invisible *
        el-col(:span="5",style="text-align:right")
          el-input(placeholder="查找日志",@keyup.native.enter="doQuery",v-model="searchParams.keyword")
            template(slot="append")
              span.el-icon-search(@click="doQuery")
      div.divide-block
      el-row
        el-col(:span="24")
          el-table(border,stripe,:data="result",v-loading="loading",element-loading-text="获取数据中...",
          element-loading-spinner="el-icon-loading")
            el-table-column(align="center",label="操作行为", prop="action")
            el-table-column(align="center",label="操作时间",width="180", prop="created_at")
            el-table-column(align="center",label="操作者")
              template(scope="scope")
                el-tag {{scope.row.user.data.name}}
          table-pagination(:size-options="[1, 10,25,50,100]",:data-total="searchParams.total",:page-size="searchParams.limit",@current-change="handleCurrentChange",@size-change="handleSizeChange")
</template>

<script>
  import utilsApi from '@/api/utils'
  import TablePagination from '@/components/TablePagination'
  export default {
    name: 'Log',
    data: () => ({
      loading: false,
      result: [],
      searchParams: {
        last: '',
        keyword: '',
        limit: 10,
        page: 1,
        total: 0
      }
    }),
    watch: {
      'searchParams.limit': function (newValue, oldValue) {
        this.doGetData()
      },
      'searchParams.page': function (newValue, oldValue) {
        this.doGetData()
      }
    },
    components: {
      TablePagination
    },
    mounted () {
      this.doGetData()
    },
    methods: {
      handleSizeChange (data) {
        this.searchParams.limit = data.val
      },
      handleCurrentChange (data) {
        debugger
        this.searchParams.page = data.val
      },
      doQuery () {
        if (this.searchParams.last !== this.searchParams.keyword) {
          this.doGetData()
          this.searchParams.last = this.searchParams.keyword
        }
      },
      doGetData () {
        this.loading = true
        console.log(this.searchParams)
        utilsApi.getLogList({
          limit: this.searchParams.limit,
          page: this.searchParams.page,
          action: this.searchParams.keyword
        }).then(res => {
          this.loading = false
          this.result = []
          if (res.data.data) {
            res.data.data.forEach(item => {
              this.result.push(item)
            })
            this.searchParams.total = res.data.meta.pagination.total
          }
        }, err => {
          this.loading = false
          this.$message({
            type: 'error',
            message: err.response.data.message
          })
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "../assets/css/mixin";

  .invisible{
    visibility: hidden;
  }
</style>
